<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>v-bind绑定</title>
		<script type="text/javascript" src="./vue.js">
			
		</script>
		<style type="text/css">
			.actives{
				width: 500px;
				transition: all .6s;
				animation: animate 15s infinite linear;
			}
			
			@keyframes animate{
				0%{
					transform: rotate(0deg);
				}
				50%{
					transform: rotate(180deg);
				}
				100%{
					transform: rotate(360deg);
				}
				50%{
					transform: rotate(180deg);
				}
				0%{
					transform: rotate(0deg);
				}
			}
			
			.active{
				width: 400px;
				border-radius: 50%;
				border: #FF0000 2px solid;
				transition: all .6s; 
				/* animation: animate 15s infinite linear; */
			}
			

		</style>
	</head>
	<body>
		<div id="app">

			<button type="button" @click="change">改变</button><br/>
			<img class="actives" :class="{active:isActive}" :src="urls" :title="title">
			
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el:"#app",
				data:{
					urls:"./preview.jpg",
					width:550,
					title:"唉唉唉",
					isActive:false
				},
				methods:{
					change:function(){
						this.isActive = !this.isActive;
					}
				}
			});
		</script>
	</body>
</html>
